<script setup>
import axios from "axios";
import dayjs from "dayjs";
import { useRoute } from "vue-router";

const route = useRoute();
const time = ref();
const date = ref();
const navCurrent = ref("集团");
let interval;
let nav = [
    {
        name: "集团",
        path: "/",
    },
    {
        name: "供热",
        path: "/heat",
    },
    {
        name: "燃气",
        path: "/gas",
    },
];

onMounted(() => {
    if (route.name === "home") {
        navCurrent.value = "集团";
    } else if (route.name === "gas") {
        navCurrent.value = "燃气";
    } else if (route.name === "heat") {
        navCurrent.value = "供热";
    }
    date.value = dayjs(Date.now()).format("YYYY年MM月DD日");
    interval = setInterval(() => {
        time.value = dayjs(Date.now()).format("HH:mm:ss");
    }, 1000);
});
onUnmounted(() => {
    clearInterval(interval);
});
</script>

<template>
    <div class="contain">
        <el-row style="height: 70%">
            <el-col :span="6">
                <el-row>
                    <el-col :span="10">
                        <div class="time">
                            {{ time }}
                        </div>
                        <div class="date">
                            {{ date }}
                        </div>
                    </el-col>
                    <el-col :span="14">
                        <el-row>
                            <el-col :span="10"><div class="img"></div></el-col>
                            <el-col :span="14">
                                <div class="text">室外温度30℃</div>
                                <div class="text">风速2m/s</div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12">
                <div class="title"></div>
            </el-col>
            <el-col :span="6">
                <!-- <div class="message"></div> -->
                <el-row :gutter="20">
                    <el-col
                        :span="6"
                        v-for="(item, id) in nav"
                        :key="`nav-${id}`"
                    >
                        <div
                            class="link"
                            :style="{
                                color:
                                    navCurrent === item.name
                                        ? '#47ffff'
                                        : '#fff',
                            }"
                            @click="
                                () => {
                                    navCurrent = item.name;
                                    this.$router.push(item.path);
                                }
                            "
                        >
                            {{ item.name }}
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped lang="scss">
.contain {
    width: 100%;
    height: 7%;
    position: absolute;
    top: 0;
    background-image: url("@/assets/img/image7.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.5);
}
.time {
    line-height: 100%;
    color: #47ffff;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
}
.date {
    color: #47ffff;
    font-size: 22px;
    text-align: center;
}
.title {
    height: 100%;
    background-image: url("@/assets/img/image3.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 10px auto 0;
    width: 600px;
}
.img {
    width: 70px;
    height: 100%;
    background-image: url("@/assets/img/sun.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
}
.text {
    color: #47ffff;
    font-size: 22px;
    text-align: center;
}
.link {
    width: 100%;
    margin-top: 10px;
    background-image: url("@/assets/img/button.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-weight: bolder;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
</style>
